<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>南流景</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <script src="{% static 'layui/layui.js' %}"></script>
    <link rel="icon" href="{% static 'img/sunshine.svg' %}" type="image/x-icon">
    <link rel="shortcut icon" href="{% static 'img/sunshine.svg' %}" type="image/x-icon">
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div class="layui-header">
        <ul class="layui-nav layui-bg-black myheader" lay-bar="disabled"
            style="text-align: center;">
            <li class="layui-nav-item "><h1 class="layui-font-24">管理后台</h1></li>
            <li class="layui-nav-item" style="float: right">
                <h1 class="layui-font-18">您好！{{ name }}</h1>
            </li>
        </ul>
    </div>
    <div class="layui-side">
        <div class="layui-side-scroll" style="background-color: #bdc3c7  !important; ">
            <!-- 左侧导航区域 -->
            <ul class="layui-nav layui-nav-tree layui-bg-black mytree"
                lay-filter="test">
                <li class="layui-nav-item lay-accordion">
                    <a href="javascript:;" class="layui-font-20 ">博文管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{% url 'user:user_getessay' %}" class="layui-font-18"
                               target="iframeMain">博文详细</a></dd>
                        <dd><a href="{% url 'user:user_addessay' %}" class="layui-font-18"
                               target="iframeMain">新增博文</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item "><a href="{% url 'user:user_gettype' %}" target="iframeMain"
                                               class="layui-font-20">
                    文章类型管理 </a>
                </li>
                <li class="layui-nav-item "><a href="{% url 'user:user_getside' %}" target="iframeMain"
                                               class="layui-font-20">
                    公告管理 </a>
                </li>
                <li class="layui-nav-item "><a href="{% url 'user:user_gettree' %}" target="iframeMain"
                                               class="layui-font-20">
                    时间树管理 </a>
                </li>
                <li class="layui-nav-item"><a class="layui-font-20" href="{% url 'user:user_update' %}"
                                              target="iframeMain" id="userupdate">
                    个人资料编辑</a></li>
                <li class="layui-nav-item"><a href="{% url 'essay:index' %}" class="layui-font-20">
                    返回主页</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body" style="background-color: #ECEBDE">

        <div style="padding: 15px;">
            <div class="layui-card layui-panel">
                <div class="layui-card-header layui-font-18">
                    {{ time }}
                </div>
                <div class="layui-card-body" style="text-align: center">
                    <iframe class="layadmin-iframe" style=" width: 1660px; height: 77vh;" name="iframeMain"

                            frameborder="0" scrolling="yes"></iframe>
                </div>
            </div>
            <br><br>
        </div>
    </div>
</div>
<script>
    //JS
    layui.use(['element', 'layer', 'util', 'jquery'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.jquery;

        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });
</script>
</body>

<style>
    .myheader {
        background: linear-gradient(90deg, #7D8E7D 31%, #2c3e50 100%) !important;
    }

    .mytree {
        background: linear-gradient(0deg, #2980B9 39%, #6DD5FA 95%, #FFFFFF 100%) !important;
    }

</style>
</html>